<template>
  <el-header height="64px" id="nav">
    <div class="container-xl p-0">
      <div class="navbar navbar-expand-lg">
        <a class="navbar-brand" style="font-size: 0px" href="/">
          <img :src="icon" height="32" />
        </a>
        <el-button class="navbar-toggler" link :style="{ marginRight: '20px', color: '#fff' }" @click="collapse.display === 'block'
          ? (collapse.display = 'none')
          : (collapse.display = 'block')
          ">
          <el-icon size="24">
            <Menu v-if="!collapse.display" />
            <CloseBold v-else />
          </el-icon>
        </el-button>
        <div class="collapse navbar-collapse" :style="collapse" id="navbarSupportedContent">
          <ul class="navbar-nav" :style="{ margin: '0 auto' }">
            <router-link :to="{ path: '/' }" custom v-slot="{ navigate, isActive }">
              <li class="nav-item" :class="isActive ? 'active' : ''" @click="navigate">
                <div>首页</div>
              </li>
            </router-link>
            <router-link :to="routers.questionbank" custom v-slot="{ navigate, isActive }">
              <li class="nav-item" :class="isActive ? 'active' : ''" @click="navigate">
                <div>题单</div>
              </li>
            </router-link>
            <router-link :to="routers.question" custom v-slot="{ navigate, isActive }">
              <li class="nav-item" :class="isActive ? 'active' : ''" @click="navigate">
                <div>题目</div>
              </li>
            </router-link>
            <router-link :to="routers.activity" custom v-slot="{ navigate, isActive }">
              <li class="nav-item" :class="isActive ? 'active' : ''" @click="navigate">
                <div>比赛</div>
              </li>
            </router-link>
            <li class="nav-item" v-if="!update">
              <a class="d-block" :href="href ? href : `/home?id=${store.state.user?.ID}&tenant_id=${tenant_id}&`"
                :style="{ color: 'var(--bs-white)', textDecoration: 'none' }" target="_blank">
                云课堂
              </a>
            </li>
            <router-link :to="{ name: '科学中心' }" custom v-slot="{ navigate }" v-if="update">
              <li class="nav-item" @click="navigate">
                <div>大数据</div>
              </li>
            </router-link>
          </ul>

          <div class="d-flex">
            <ul v-if="!getuser?.ID" class="navbar-nav mr-auto">
              <el-popover :width="180">
                <template #reference>
                  <li class="nav-item p-1">
                    <!-- <img src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/Chat%20Help.svg" width="19"
                      :style="{ transform: 'translateY(-2px)' }" />
                    <span>&nbsp;助教老师</span> -->
                    <i class="iconfont">&#xe61b;</i>
                    <span>&nbsp;助教老师</span>
                  </li>
                </template>
                <div :style="{ paddingLeft: '4px', paddingRight: '4px' }">
                  <div :style="{ marginBottom: '12px' }">
                    如系统使用有疑问，
                    <br />可通过微信联系老师
                  </div>
                  <img :src="customerservice[0]?.qrcode" width="144" height="144" />
                  <!-- <img src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/erweima_guhang.jpg"
                    width="144" height="144" /> -->
                </div>
              </el-popover>
              <li @click="shoudialogVisible('登录')" class="nav-item p-1">登录</li>
              <li @click="shoudialogVisible('注册')" class="nav-item p-1">注册</li>
            </ul>
            <ul v-else class="navbar-nav mr-auto">
              <el-popover :width="180">
                <template #reference>
                  <li class="nav-item">
                    <i class="iconfont">&#xe61b;</i>
                    <span>&nbsp;助教老师</span>
                  </li>
                </template>
                <div :style="{ paddingLeft: '4px', paddingRight: '4px' }">
                  <div :style="{ marginBottom: '12px' }">
                    如系统使用有疑问，
                    <br />可通过微信联系老师
                  </div>
                  <img :src="customerservice[0]?.qrcode" width="144" height="144" />
                  <!-- <img src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/erweima_guhang.jpg"
                    width="144" height="144" /> -->
                </div>
              </el-popover>
              <li class="nav-item">
                <Notice />
              </li>
              <li class="nav-item">
                <el-dropdown ref="dropdownref" :max-height="400" :tabindex="10" @command="handleCommand2">
                  <div style="font-size: 16px; line-height: 64px" class="avater-h">

                    <span class="avater-name hov" style="font-size: 14px">
                      <i class="iconfont">&#xe600;</i>
                      团队</span>
                  </div>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item v-for="(v, k) in getteam" :key="'team_' + k" class="position-relative"
                        :command="k">
                        <router-link :to="`/team/${v.ID}`" custom v-slot="{ navigate }">
                          <span class="stretched-link"
                            @click="() => { dropdownref.handleClose(); changeTeam(v); navigate() }"
                            v-text="v.name"></span>
                        </router-link>
                      </el-dropdown-item>
                      <!-- <el-dropdown-item class="tmp111" command="a"  :disabled="!getuser">创建团队</el-dropdown-item> -->
                      <el-dropdown-item divided command="b">搜索团队</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </li>
              <li class="nav-item">
                <el-dropdown @command="handleCommand">
                  <div class="avater-h">
                    <el-avatar style="transform: translateY(7px)" size="small" :src="circleUrl"></el-avatar>
                    <span class="avater-name hov" :style="{ marginLeft: '10px' }"
                      v-text="getuser ? getuser.name : ''"></span>
                  </div>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item command="u">个人中心</el-dropdown-item>
                      <el-dropdown-item command="a">管理我的题目</el-dropdown-item>
                      <el-dropdown-item command="c">测试点贡献查询</el-dropdown-item>
                      <el-dropdown-item class="tmp111" command="d" divided v-if="!update">修改个人信息</el-dropdown-item>
                      <el-dropdown-item command="b">退出</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <el-dialog v-model="dialogVisible" class="el-dialog-z" width="502px" append-to-body :lock-scroll="false">
      <template #header>
        <span></span>
      </template>
      <div class="row justify-content-md-center text-login">
        <div class="col">
          <h4 v-text="name" :class="name == '登录' ? 'text-center' : ''"></h4>
        </div>
      </div>

      <div id="navel-dialog" class="row justify-content-md-center text-body">

        <div class="col" v-show="name == '登录'">
          <el-form ref="formref" :model="form" label-width="95px" size="default" label-position="left">
            <el-form-item class="text-item text-center" label-width="0">
              <img style="transform: translateX(10px)" width="80" class="headimage"
                src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/headportrait/head9.jpg" />
            </el-form-item>
            <el-form-item class="text-item" label="账号/手机号">
              <el-input placeholder="账号/手机号" name="phonenum" v-model="form.phonenum"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input placeholder="密码" name="password" type="password" v-model="form.password"></el-input>
            </el-form-item>
            <div class="text-right pu" @click="name = '忘记密码'">找回/修改密码</div>
            <el-form-item label-width="0">
              <div class="row m-0 p-0">
                <div class="col">
                  <button class="btn d-block btn-login" type="button" @click="login">登录</button>
                </div>
                <div class="col">
                  <button class="btn d-block btn-login" type="button" @click="name = '注册'">用户注册</button>
                </div>
              </div>
            </el-form-item>
          </el-form>
        </div>

        <div class="col" v-show="name == '忘记密码'">
          <el-form ref="forgetref" :model="forget" label-width="95px" size="default" label-position="left">
            <el-form-item class="text-item text-center" label-width="0">
              <img style="transform: translateX(10px)" width="80" class="headimage"
                src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/headportrait/head9.jpg" />
            </el-form-item>
            <el-form-item class="text-item" label="手机号：" prop="phonenum">
              <el-input placeholder="请输入手机号" name="phonenum" v-model="forget.phonenum"></el-input>
            </el-form-item>
            <el-form-item class="text-item" label="验证码：" prop="yzm">
              <div class="row m-0">
                <div class="col p-0">
                  <el-input placeholder="四位验证码" v-model="forget.yzm"></el-input>
                </div>
                <div class="col pr-0">
                  <button style="height: 30px; border: 0px" class="d-block btn-login border-light"
                    @click.stop.prevent="click2" :disabled="time2 !== 60" v-text="time2 == 60 ? '验证码' : time2"></button>
                </div>
              </div>
            </el-form-item>
            <el-form-item class="text-item" label="新密码：" prop="password">
              <el-input placeholder="请输入新密码" name="newpassword" type="password" v-model="forget.password"></el-input>
            </el-form-item>
            <el-form-item class="text-item" label-width="0">
              <div class="row m-0 p-0">
                <div class="col p-0 text-right">
                  <button class="btn btn-login d-block" type="button" @click="forgetpassword">修改密码</button>
                </div>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <el-dialog width="530px" class="el-dialog-z-1" v-model="innerVisible">
          <div>
            <img :src="im" class="headimage" @click="register.headportrait = im;
            passwordform.headportrait = im;
            innerVisible = false;
            " v-for="im in headimage " :key="im" />
          </div>
        </el-dialog>

        <div class="col" v-show="name == '注册'">
          <el-form ref="registerref" :rules="registerrole" :model="register" label-width="95px" size="default"
            label-position="left">
            <el-form-item class="text-item cu" @click=" innerVisible = true" label-width="0">
              <img :src="register.headportrait" class="headimage" width="80" />
              &nbsp;&nbsp;&nbsp;点击图片修改头像
            </el-form-item>
            <el-form-item class="text-item" label="手机号：" prop="phonenum">
              <el-input placeholder="请输入手机号" name="phonenum" v-model="register.phonenum"></el-input>
            </el-form-item>
            <el-form-item class="text-item" label="验证码：" prop="yzm">
              <div class="row m-0">
                <div class="col p-0">
                  <el-input placeholder="请输入验证码" v-model="register.yzm"></el-input>
                </div>
                <div class="col pr-0">
                  <button style="height: 30px; border: 0px" class="d-block btn-login border-light"
                    @click.stop.prevent="click" :disabled="time !== 60" v-text="time == 60 ? '验证码' : time"></button>
                </div>
              </div>
            </el-form-item>
            <el-form-item class="text-item" label="密码：" prop="password">
              <el-input type="password" name="password" placeholder="请输入密码" v-model="register.password"></el-input>
            </el-form-item>

            <el-form-item class="text-item">
              <el-input placeholder="请输入用户名" label="用户名：" name="name" v-model="register.name"></el-input>
            </el-form-item>
            <el-form-item class="text-item" label-width="0">
              <div class="row m-0 p-0">
                <div class="col p-0">
                  <button class="btn btn-login d-block" type="button" @click="registersubmit">注册</button>
                </div>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <div class="col" :style="{ marginTop: '24px' }" v-show="name == '修改个人信息'">
          <el-form ref="registerref" :model="passwordform" label-width="95px" size="default" label-position="left">
            <el-form-item class="text-item" label="用户名：" prop="name">
              <el-input type="text" placeholder="请输入用户名" v-model.trim="passwordform.name"></el-input>
            </el-form-item>
            <el-form-item class="text-item" label="原始密码：" prop="password">
              <el-input type="password" name="password" placeholder="请输入原始密码" v-model="passwordform.password">
              </el-input>
            </el-form-item>
            <el-form-item class="text-item" label="新密码：" prop="password1">
              <el-input type="password" name="password" placeholder="请输入新密码" v-model="passwordform.password1">
              </el-input>
            </el-form-item>
            <el-form-item class="text-item cu" @click=" innerVisible = true" label-width="0">
              <img :src="passwordform.headportrait
                ? passwordform.headportrait
                : getuser
                  ? getuser.headportrait
                  : 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/headportrait/head9.jpg'
                " class="headimage" :style="{ width: '56px', height: '56px' }" width="56" />
              &nbsp;&nbsp;&nbsp;点击图片修改头像
            </el-form-item>
            <el-form-item class="text-item" prop="phonenum" label="手机号：">
              <el-input placeholder="请输入手机号" name="phonenum" v-model="passwordform.phonenum"></el-input>
            </el-form-item>

            <el-form-item class="text-item" label-width="0">
              <div class="row m-0 p-0">
                <div class="col p-0">
                  <button class="btn btn-login d-block" type="button" @click="changepassword">修改个人信息</button>
                </div>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-dialog>

    <el-dialog title="搜索团队" v-model="dialogVisibleteam" width="500px" center append-to-body
      :close-on-click-modal="false">
      <el-form :model="teamForm" :rules="teamrules" ref="ruleFormteam" label-width="100px" class="demo-ruleForm">
        <el-form-item label="团队名称：" prop="teamid">
          <el-select v-model="teamForm.teamid" filterable remote reserve-keyword placeholder="请输入团队名称"
            :remote-method="remoteMethod" :loading="teamloading">
            <el-option v-for=" item in teamselect " :key="item.ID" :label="item.name" :value="Number(item.ID)">
              <span style="float: left">{{ item.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">
                {{
                  item.user?.name
                }}
              </span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申请理由：">
          <el-input v-model="teamForm.context"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button plain @click=" submitForm('ruleFormteam')">提交申请</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-header>
</template>

<script setup lang='ts'>
import { CloseBold, Menu } from '@element-plus/icons-vue';
import { ElForm, ElMessage, ElMessageBox } from "element-plus";
import { computed, inject, onMounted, reactive, ref, watch } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import {
  asyncaddteamlog,
  asyncchangepassword,
  asynccreateteam,
  asyncgetcustomerservice,
  asynclogout,
  asyncselectteams,
} from "../api";
import {
  asyncgetregistphoneVerificationCode,
  asynclogin,
  asyncresetpassword,
  asyncuserregist,
} from "../api/index";
import Notice from "../components/notice/index1.vue";
import headimage from "../index/data/headimage";
import * as routers from "../index/data/router";
import { Storekey } from "../interface";
import Studycodemodel from "../mysql_interface/studycodemodel";
import { isPhonenum } from "../util/RegExp";

// 码客行
const tenant_id = inject<string | undefined>('tenant_id', undefined)

const router = useRouter()
const teamloading = ref(false)
const dialogVisible = ref(false)
const dialogVisibleteam = ref(false)
const collapse = reactive<Record<string, any>>({})
const teamselect = ref<Studycodemodel.Iteam[]>([])
const time = ref(60)
const time2 = ref(60)
defineProps<{ icon: string, update?: boolean, href?: string, changeTeam: Function }>()

const customerservice = ref<Studycodemodel.Icustomerservice[]>([])
onMounted(async () => {
  customerservice.value = await asyncgetcustomerservice({ info: "首页助教老师" })
});

const dropdownref = ref()

const passwordform = reactive({
  name: '',
  password: "",
  password2: "",
  password1: "",
  headportrait: "",
  phonenum: ""
})

const form = reactive({
  password: "",
  phonenum: "",
})

const register = reactive({
  phonenum: "",
  password: "",
  yzm: "",
  headportrait: headimage[9],
  name: "",
})
const forget = reactive({
  phonenum: "",
  password: "",
  yzm: "",
})

const teamForm = reactive<Record<string, any>>({
  userid: 0,
  username: "",
  type: "申请",
  context: "",
})

const name = ref('登录')

const registerrole = {
  phonenum: [
    {
      message: "手机号不合法",
      regexp: isPhonenum,
      trigger: "blur",
    },
  ],
  password: [
    {
      min: 4,
      max: 25,
      message: "长度在 3 到 25 个字符",
      trigger: "blur",
    },
  ],
  yzm: [{ required: true, message: "请输入验证码", trigger: "blur" }],
}
const teamrules = {
  teamid: [{ required: true, message: "请选择团队", trigger: "blur" }],
}

const innerVisible = ref(false)

const store = useStore(Storekey)
const getuser = computed(() => {
  return store.state.user
})

const getteam = computed(() => {
  return store.state.team?.rows || []
})

const circleUrl = computed(() => {
  if (getuser.value) return getuser.value.headportrait;
  return "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png";
})

async function handleCommand(co: string) {
  switch (co) {
    case "a":
      router.push({ name: "我的资源" });
      break;
    case "b":
      await asynclogout();
      location.reload()
      await store.dispatch('actiononline')
      break;
    case "c":
      router.push({
        name: "贡献测试点查询",
      });
      break;
    case "u":
      router.push({
        name: "用户",
      });
      break;
    case "d":
      dialogVisible.value = true;
      name.value = "修改个人信息";
      break;
    default:
  }
}

function shoudialogVisible(name1: string) {
  dialogVisible.value = true;
  if (name1) {
    name.value = name1;
  }
}

async function login() {
  const { phonenum, password } = form;
  try {
    await asynclogin({ ID: phonenum, password });
    location.reload()
    await store.dispatch('actiononline')
    dialogVisible.value = false;
    ElMessage.success("登录成功");
  } catch (e: any) {
    ElMessage.error(e);
  }
}

function remoteMethod(query: string) {
  if (query) {
    teamloading.value = true;
    asyncselectteams({
      name: query,
    })
      .then((e) => {
        teamselect.value = e.rows;
        teamloading.value = false;
      })
      .catch((e) => {
        teamselect.value = [];
        teamloading.value = false;
        ElMessage.warning(e);
      });
  }
}

async function click() {
  const { phonenum } = register;
  if (time.value !== 60) return;
  if (isPhonenum.test(phonenum)) {
    await asyncgetregistphoneVerificationCode(phonenum);
    const x = setInterval(() => {
      time.value = time.value - 1
      if (time.value == 0) {
        clearInterval(x);
        time.value = 60;
      }
    }, 1000);
  }
}

async function click2() {
  const { phonenum } = forget;
  if (time2.value !== 60) return;
  if (isPhonenum.test(phonenum)) {
    await asyncgetregistphoneVerificationCode(phonenum);
    const x = setInterval(() => {
      time2.value = time2.value - 1;
      if (time2.value == 0) {
        clearInterval(x);
        time2.value = 60;
      }
    }, 1000);
  }
}

async function changepassword() {
  try {
    await asyncchangepassword(passwordform);
    ElMessage.success("修改个人信息成功");
    dialogVisible.value = false;
  } catch (e: any) {
    ElMessage.error(e);
  }
}

const forgetref = ref<typeof ElForm>()

async function forgetpassword() {
  forgetref.value?.validate(async (valid: any) => {
    if (valid) {
      try {
        await asyncresetpassword(forget);
        ElMessage.success("修改个人信息成功");
        await asynclogin({
          ID: forget.phonenum,
          password: forget.password,
        });
        await store.dispatch('actiononline')
        dialogVisible.value = false;
      } catch (e: any) {
        ElMessage.error(e);
      }
    } else {
      return false;
    }
  });
}

function handleCommand2(co: string) {
  dropdownref.value?.handleClose()
  switch (co) {
    case "a":
      if (!getuser.value) {
        shoudialogVisible('登录');
      } else {
        if (
          getteam.value.filter((v) => v.userid === getuser.value?.ID).length >
          4
        ) {
          ElMessage.warning("创建团队数上限为5");
          return;
        }

        ElMessageBox.prompt("请输入名称", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }).then(({ value }) => {
          if (value) {
            asynccreateteam({ name: value })
              .then((e) => {
                if (e.ID) {
                  router.push({
                    name: "团队",
                    params: {
                      ID: e.ID,
                    },
                  });
                }
              })
              .catch((e) => {
                ElMessage.error(e);
              });
          }
        });
      }
      break;
    case "b":
      dialogVisibleteam.value = true;
      break;
    default:
      return
  }
}
const ruleFormteam = ref<typeof ElForm>()

async function submitForm(name: string) {
  const t = ruleFormteam.value

  t?.validate(async (v: any) => {
    if (v) {
      await asyncaddteamlog(teamForm)
        .then(() => {
          ElMessage.success("提交成功");
          dialogVisibleteam.value = false;
        })
        .catch((e) => {
          ElMessage.warning(e);
        });
    }
  });
}

const registerref = ref()

async function registersubmit() {
  registerref.value.validate(async (valid: any) => {
    if (valid) {
      try {

        await asyncuserregist(register);
        ElMessage.success("注册成功");
        await store.dispatch('actiononline')
        dialogVisible.value = false;
        location.reload()
      } catch (e: any) {
        ElMessage.error(e);
      }
    } else {
      return false;
    }
  });
}

watch(() => store.state.user, (e) => {
  if (e) {
    passwordform.name = e.name ? e.name : ''
  }
})



defineExpose({
  shoudialogVisible,
  handleCommand,
  handleCommand2
})


</script>

<style scoped>
#nav {
  background-color: var(--color-43);
  left: 0px;
  top: 0px;
  margin: 0 auto;
  width: 100%;
  z-index: 10;
  box-shadow: 0px 3px 6px rgba(114, 114, 114, 0.16);
}

#nav .navbar {
  padding: 0;
  height: 64px;
  line-height: 64px;
}

#nav .navbar-brand {
  min-width: 180px;
  height: 64px;
  padding-top: 15px;
  padding-bottom: 15px;
  text-align: center;
}

#nav .navbar-brand img {
  margin: 0 auto;
  display: block;
}

#nav .img {
  height: 1.1rem;
  width: 1.1rem;
  vertical-align: baseline;
}

#nav .icon {
  font-size: 1.25rem;
}

.nav-item:hover {
  color: var(--color-cheng2);
}

.nav-item:hover a {
  color: var(--color-cheng2) !important;
}

.hov:hover {
  color: var(--color-cheng);
}

.router-link-exact-active {
  color: var(--color-cheng);
}

.el-icon-bell {
  font-size: 24px;
}

.headimages {
  height: 80px;
  line-height: 80px;
}

.headimages-item {
  display: inline-block;
  width: 50px;
  height: 50px;
}

.imageright {
  margin-right: -35px;
}

.imageleft {
  margin-left: -35px;
}

.imagecenter {
  z-index: 20;
}

.avater-name {
  display: inline-block;
  font-size: 14px;
  color: var(--bs-white);
}

.headimages img {
  width: 50px;
  height: 50px;
}

.avater-h {
  line-height: 64px;
}

.avater-h:focus-visible {
  outline: none !important;
}

.head-left {
  margin-right: -25px;
}

.head-center {
  z-index: 10;
}

.head-right {
  margin-left: -25px;
}

.headimages img:hover {
  width: 75px;
  height: 75px;
  z-index: 10;
}

.pu {
  cursor: pointer;
  color: var(--color-909399);

  line-height: 15px;
  margin-bottom: 20px;
}

.image {
  width: 75px;
  height: 75px;
}

.text-login {
  margin-bottom: 3px;
  margin-top: 3px;
}

.text-login h4 {
  text-align: center;
  font-size: 28px;
  font-weight: 650;
  color: var(--color-606266);
}

.text-body .col-6 {
  min-height: 400px;
}

.btn {
  height: 40px;
  font-size: 18px;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
}

.btn-login {
  background: var(--color-43);
  border-radius: 2px !important;
  color: #fff;
}

.btn-login:hover {
  color: #fff;
  background-color: var(--color-cheng);
}

.text-item {
  margin-bottom: 28px;
}

.p-1 {
  font-size: 14px;
}

.nav-item-name {
  line-height: 64px;
}

.headimage {
  width: 80px;
  height: 80px;
  background: rgba(0, 0, 0, 0);
  box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.08);
  border-radius: 50%;
  cursor: pointer;
}

.d-block {
  width: 100%;
}


#nav .navbar {
  padding: 0;
}

#nav .navbar-brand {
  height: 64px;
  padding-top: 15px;
  padding-bottom: 15px;
  text-align: center;
}

#nav .navbar-brand img {
  margin: 0 auto;
  display: block;
}

#nav .img {
  height: 1.1rem;
  width: 1.1rem;
  vertical-align: baseline;
}

#nav .icon {
  font-size: 1.25rem;
}

#nav .active {
  border-bottom: 4px solid var(--color-cheng2)
}

.nav-item {
  font-size: 14px;
  padding-left: 12px;
  padding-right: 12px;
  cursor: pointer;
  line-height: 64px;
  color: var(--bs-white);
  text-decoration: none;
  height: 64px;
  position: relative;
}




.router-link-exact-active {
  color: var(--color-cheng);
}

.el-icon-bell {
  font-size: 24px;
}

.headimages {
  height: 80px;
  line-height: 80px;
}

.headimages-item {
  display: inline-block;
  width: 50px;
  height: 50px;
}

.imageright {
  margin-right: -35px;
}

.imageleft {
  margin-left: -35px;
}

.imagecenter {
  z-index: 20;
}


.headimages img {
  width: 50px;
  height: 50px;
}

.avater-h {
  line-height: 64px;
}

.head-left {
  margin-right: -25px;
}

.head-center {
  z-index: 10;
}

.head-right {
  margin-left: -25px;
}

.headimages img:hover {
  width: 75px;
  height: 75px;
  z-index: 10;
}

.pu {
  cursor: pointer;
  color: var(--color-909399);

  line-height: 15px;
  margin-bottom: 20px;
}

.image {
  width: 75px;
  height: 75px;
}

.text-login {
  margin-bottom: 3px;
  margin-top: 3px;
}

.text-login h4 {
  text-align: center;
  font-size: 28px;
  font-weight: 650;
  color: var(--color-606266);
}

.text-body .col-6 {
  min-height: 400px;
}

.btn {
  height: 40px;
  font-size: 18px;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
}

.btn-login {
  background: var(--color-43);
  border-radius: 2px !important;
  color: #fff;
}

.btn-login:hover {
  color: #fff;
  background-color: var(--color-cheng);
}

.text-item {
  margin-bottom: 28px;
}

.p-1 {
  font-size: 14px;
}

.nav-item-name {
  line-height: 64px;
}

.headimage {
  width: 80px;
  height: 80px;
  background: rgba(0, 0, 0, 0);
  box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.08);
  border-radius: 50%;
  cursor: pointer;
}

.d-block {
  width: 100%;
}

.el-dialog-z-1 {
  height: 340px;
}

.iconfont {
  font-size: 14px;
  padding-right: 2px;
}

.collapse:not(.show) {
  transition: all 0.3s;
  background-color: var(--color-43);
}
</style>


<style>
.el-dialog-z {
  background-repeat: no-repeat !important;
  background-position: left !important;
  border: 0px;
  background-size: 464px 100% !important;
  background-color: rgba(255, 255, 255, 1) !important;
  min-height: 530px;
}

.el-dialog-z .icon {
  font-size: 1rem;
}

.el-dialog-z .el-dialog__header {
  padding: 0;
}


#navel-dialog .el-form-item__content {
  display: block;
}


.el-dialog-z-1 {
  height: 340px;
}

.el-dialog-z-1 img {
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
}

#nav .el-badge {
  vertical-align: initial;
}

#nav .el-dropdown {
  color: #212529;
}



.tmp111:before {
  display: none !important;
}
</style>